<template>
    <div>
        <el-breadcrumb
            separator-class="el-icon-arrow-right"
            class="breadcrumb-base"
            style="line-height: 30px;"
        >
            <el-breadcrumb-item>
                <i class="el-icon-document-copy"></i>
                报告模板
            </el-breadcrumb-item>
        </el-breadcrumb>

        <div class="main-container">
            <base-table
                ref="templateTable"
                :data="templateTable.data"
                :header="templateTable.header"
                :operation="templateTable.operation"
                :pageInfo="templateTable.pageInfo"
                :cellStyleFunc="templateTableCellStyleFunc"
                :buttonVisibleFunc="templateTableButtonVisibleFunc"
                @handleClick="templateTableButtonClick"
                @pageJumpTo="templateTablePageJumpTo"
                @sizeChange="templateTableSizeChange"
            >
            </base-table>
        </div>
    </div>
</template>

<script>
import BaseTable from '@templates/components/BaseTable';
import { itemsPerPage } from '@/client/libs/util';

export default {
    name: 'InstitutionReportTemplates',
    components: {
        BaseTable,
    },
    data() {
        return {
            templateTable: {
                data: [],
                header: [
                    {
                        label: '检查类型',
                        prop: 'checkCategoryName',
                        width: '200',
                    },
                    {
                        label: '状态',
                        prop: 'statusName',
                        width: '100',
                    },
                    {
                        label: '报告期限(天)',
                        prop: 'settingsDeadline',
                        width: '150',
                    },
                    {
                        label: '标本类型',
                        prop: 'settingsSpecimenCategoryName',
                        width: '120',
                    },
                    {
                        label: '备注',
                        prop: 'settingsRemark',
                    },
                    {
                        label: '最近修改时间',
                        prop: 'updateTime',
                        width: '200',
                    },
                ],
                operation: [
                    {
                        label: '编辑',
                        functionKey: 'templateTableButtonEdit',
                    },
                    {
                        label: '预览',
                        functionKey: 'templateTableButtonPreview',
                    },
                    {
                        label: '冻结',
                        color: 'red',
                        functionKey: 'templateTableButtonFreeze',
                    },
                    {
                        label: '恢复',
                        functionKey: 'templateTableButtonRecover',
                    },
                ],
                pageInfo: {
                    size: itemsPerPage.get(),
                    page: 1,
                    total: 0,
                },
            },
        };
    },
    mounted() {
        this.templateTableRequest();
    },
    methods: {
        async templateTableRequest() {
            try {
                const { state } = this.$store;
                await this.$axios({
                    method: 'GET',
                    url: '/PROXY-Remote/report-templates',
                    params: {
                        institutionId: state.institution.id,
                        page: this.templateTable.pageInfo.page - 1,
                        size: this.templateTable.pageInfo.size,
                    },
                }).then((res) => {
                    // 请求失败
                    if (res.data.code !== 200) {
                        throw new Error(res.data);
                    }

                    // 请求成功
                    const result = res.data;
                    // 分页信息
                    this.templateTable.pageInfo = {
                        total: result.pageInfo.total,
                        page: result.pageInfo.page + 1,
                        size: result.pageInfo.size,
                    };
                    // 查询结果数据
                    this.templateTable.data = [];
                    result.data.forEach((t, index) => {
                        const item = t;
                        item.index = index;
                        item.statusName = t.status ? '已冻结' : '使用中';

                        this.templateTable.data.push(item);
                    });
                });
            } catch (e) {
                // 跳出
            }
        },
        templateTableButtonClick(functionKey, row) {
            this[functionKey](row);
        },
        templateTableButtonEdit(row) {
            const setter = {
                key: 'reportTemplateId',
                value: row.id,
            };
            this.$store.commit('setPropertyGeneral', setter);
            this.$router.push(`${this.$route.path}/edit`);
            console.log('templateTableButtonEdit');
        },
        templateTableButtonPreview(row) {
            this.$store.commit('setPropertyGeneral', {
                key: 'reportTemplateId',
                value: row.id,
            });
            this.$router.push(`/report-templates/preview/${row.id}`);
            // window.open(`/report-templates/preview/${row.id}`);
        },
        async templateTableButtonFreeze(row) {
            try {
                await this.$axios({
                    method: 'PUT',
                    url: `/PROXY-Remote/report-templates/lock/${row.id}`,
                }).then((res) => {
                    // 请求失败
                    if (res.data.code !== 200) {
                        throw new Error(res.data);
                    }

                    // 请求成功
                    this.$message.success('操作成功');
                    this.templateTableRequest();
                });
            } catch (e) {
                // 跳出
            }
        },
        async templateTableButtonRecover(row) {
            try {
                await this.$axios({
                    method: 'PUT',
                    url: `/PROXY-Remote/report-templates/unlock/${row.id}`,
                }).then((res) => {
                    // 请求失败
                    if (res.data.code !== 200) {
                        throw new Error(res.data);
                    }

                    // 请求成功
                    this.$message.success('操作成功');
                    this.templateTableRequest();
                });
            } catch (e) {
                // 跳出
            }
        },
        templateTablePageJumpTo(val) {
            this.templateTable.pageInfo.page = val;
            // 为 templateTable.data 赋值相应页上新数据
            this.templateTableRequest();
        },
        templateTableSizeChange(val) {
            this.templateTable.pageInfo.size = val;
            // 为 templateTable.data 赋值相应数据量新数据
            this.templateTableRequest();
        },
        templateTableButtonVisibleFunc(key, row) {
            switch (key) {
                case 'templateTableButtonFreeze':
                    return row.status === 0;
                case 'templateTableButtonRecover':
                    return row.status === 1;
                default:
                    return true;
            }
        },
        templateTableCellStyleFunc({ row, column }) {
            const baseStyle = {
                padding: '3px 0',
                'border-right': '1px solid #ffffff',
                'font-size': '14px',
            };
            if (column.label === '状态') {
                if (row.status === 1) {
                    baseStyle.color = 'red';
                }
                if (row.status === 0) {
                    baseStyle.color = '#409eff';
                }
            }
            return baseStyle;
        },
    },
};
</script>

<style scoped>
</style>
